@import "../variable.less";
@import "../func.less";

.loop-offset(@n, @name: ~"", @dir: left, @i: 1) when (@i =< @n) {
  .offset@{name}-@{i} {
    margin-@{dir}: (floor((@i * 1000000 / @n)) / 10000) * 1%;
  }

  .loop-offset(@n, @name, @dir, (@i + 1));
}

.loop-offset-right(@n, @name: ~"") {
  .loop-offset(@n, @name, right);
}


.row {
  .loop-offset(@columns-count);
  
  @media (max-width: @xxs-screen-min) {
    .loop-offset(@columns-count, -xxs);
  }
  @media (min-width: @xs-screen-min) {
    .loop-offset(@columns-count, -xs);
  }
  @media (min-width: @sm-screen-min) {
    .loop-offset(@columns-count, -sm);
  }
  @media (min-width: @md-screen-min) {
    .loop-offset(@columns-count, -md);
  }
  @media (min-width: @lg-screen-min) {
    .loop-offset(@columns-count, -lg);
  }
  @media (min-width: @xl-screen-min) {
    .loop-offset(@columns-count, -xl);
  }
  @media (min-width: @xxl-screen-min) {
    .loop-offset(@columns-count, -xxl);
  }
}

.row-reverse {
  .loop-offset-right(@columns-count);
  
  @media (max-width: @xxs-screen-min) {
    .loop-offset-right(@columns-count, -xxs);
  }
  @media (min-width: @xs-screen-min) {
    .loop-offset-right(@columns-count, -xs);
  }
  @media (min-width: @sm-screen-min) {
    .loop-offset-right(@columns-count, -sm);
  }
  @media (min-width: @md-screen-min) {
    .loop-offset-right(@columns-count, -md);
  }
  @media (min-width: @lg-screen-min) {
    .loop-offset-right(@columns-count, -lg);
  }
  @media (min-width: @xl-screen-min) {
    .loop-offset-right(@columns-count, -xl);
  }
  @media (min-width: @xxl-screen-min) {
    .loop-offset-right(@columns-count, -xxl);
  }
}

















